<template>
    <div class="c-input__box" :class="{arrow: arrow}">
        <div class="c-input__label" :class="{required: item.required}">
            {{item.name || ''}}
            <template v-if="item.typeValue === 'select'">
                <div class="c-label__tag">单选</div>
            </template>
            <template v-else-if="item.typeValue === 'cascader'">
                <div class="c-label__tag">多选</div>
            </template>
            <template v-else></template>
        </div>
        <div class="c-input__value">
            <div class="c-input__info">
                <slot>
                    <el-input
                        v-model="inputValue"
                        :placeholder="prefix + (item.placeholder || item.name || '')"
                        maxlength="30"
                        auto-complete="off"
                    >
                    </el-input>
                </slot>
            </div>
            <div class="c-input__suffix" v-if="item.unit">
                {{item.unit}}
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class CInput extends Vue {
    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly item!: any;

    @Prop({
        type: Boolean,
        default: false
    })
    readonly arrow!: boolean;

    @Prop({
        type: String,
        default: ""
    })
    readonly prefix!: string;

    inputValue = "";
}
</script>
